<template>
  <div class="hot">
    <div class="header">
      <span class="title">华夏黉</span>
 
    </div>
    <div class="header-a"></div>
    <div class="hot-list">
      <div class="hot-heading">—— 全部商品 ——</div>
      <div class="hot-introduce">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="isMoreLoading"
          infinite-scroll-distance="10"
          :infinite-scroll-immediate-check="true"
          class="newsList"
        >
          <router-link
            tag="li"
            v-for="item in newsList"
            :key="item.id"
            :to="{name:'Detail',
          query:{
            id:item.id,
          }}"
          >
            <div class="hot-introduce-box">
              <div class="left">
                <img :src="JSON.parse(item.goodsPic)">
              </div>
              <div class="right">
                <div class="right-title">{{item.goodsName}}{{item.goodsIntro}}</div>
                <div class="right-price">￥{{price/100}}起</div>
                <div class="right-cart">
                  <img :src="images3" class="images3">
                </div>
              </div>
            </div>
          </router-link>
        </ul>
        <div class="loading-box tc" v-if="isLoading">
          <mt-spinner type="snake" class="loading-more"></mt-spinner>
          <span class="loading-more-txt">加载中...</span>
        </div>
        <div class="no-more" v-if="noMore">没有更多了~</div>
      </div>
    </div>
    <div class="bottom">
      <div class="remarks">
        <span class="remarks-left">店铺主页</span>
        <span class="remarks-center">个人中心</span>
        <span class="remarks-center">关注我们</span>
        <span class="remarks-right">店铺信息</span>
      </div>
    </div>
  </div>
</template>
<script>
import pic3 from "../../icons/cart.png";
import * as api from "../../request/api.js";
export default {
  name: "Mall",
  data() {
    return {
      images3: pic3,
      newsList: [],
      moreList: [],
      i: 0,
      isMoreLoading: false,
      isLoading: false,
      noMore: false // 加载更多中
    };
  },
  created() {
    let i = 0;
    this.$http({
      method: "post",
      url: api.LIST,
      data: {
        pageNo: 1,
        pageSize: 10,
        keyWord: "",
        goodsTypeId: ""
      }
    })
      .then(resp => {
        console.log(resp)
        this.newsList = resp.data.data.slice(i * 5, (i + 1) * 5);
        // console.log(
        //   this.newsList[0].goodsPic
        //     .replace('"', "")
        //     .replace('"', "")
        //     .replace(/\[|]/g, "")
        // );
        resp.data.data.forEach(item => {
          this.price = (item.goodsTruePrice / 100).toFixed(2);
          console.log(this.price);
        });
      })
      .catch(err => {
        console.log(err);
      });

    // let i = 0;
    // this.$http.post().then(function(response) {
    //   console.log(response.data);
    //
    // }).catch(function(error) {
    //   console.info(error)
    // });
  },
  methods: {
    loadMore() {
      this.isMoreLoading = true;
      this.isLoading = true;
      this.noMore = false;
      setTimeout(() => {
        var _vm = this;
        _vm.axios
          .post()
          .then(function(response) {
            console.log(response.data);
            _vm.i++;
            _vm.moreList = response.data.slice(_vm.i * 5, (_vm.i + 1) * 5);
            if (_vm.moreList.length == 0) {
              _vm.noMore = true;
              _vm.isLoading = false;
            } else {
              _vm.isLoading = false;
              _vm.moreList.forEach(function(item) {
                _vm.newsList.push(item);
              });
            }
          })
          .catch(function(error) {
            console.info(error);
          });
        this.noMore = false;
        this.isMoreLoading = false;
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../less/hotlist.less";
</style>